<script setup>
import { reactive } from "vue";

const state = reactive({
  msg: "hello",
  count: 0,
  name: "fang",
  arr: [
    { title: 1, id: 1 },
    { title: 2, id: 2 },
  ],
});
const change = () => {
  state.count++;
  state.arr.push({ title: 3333, id: state.arr.length + 1 });
};
</script>

<template>
  <div>
    {{ state.msg }} {{ state.count }}
    <ul>
      <li v-for="(v, i) in state.arr" :key="i">{{ v.title }}</li>
    </ul>
    <button @click="change">click</button>
  </div>
</template>

<style scoped></style>
